// 定义类型
interface SystemState {
  isCollapse: boolean
  isFullScreen: boolean
  drawer: boolean
  theme: string
}

import { defineStore } from 'pinia'
import router from '@/router'
import { reactive, toRefs } from 'vue'

const html = document.documentElement

export const useSystemStore = defineStore('systemStore', () => {
  // 定义状态
  const state = reactive<SystemState>({
    isCollapse: false,
    isFullScreen: false,
    drawer: false,
    theme: localStorage.getItem('theme') || 'light',
  })

  // 定义 actions
  const insertPost = (data: boolean): void => {
    state.isCollapse = data
  }

  const changeFullScreen = (data: boolean): void => {
    state.isFullScreen = data
  }

  const loginOut = async (): Promise<void> => {
    await router.push({
      name: 'login',
    })
  }

  const changeDrawer = (data: boolean): void => {
    state.drawer = data
  }

  const changeTheme = (data: string): void => {
    html.setAttribute('data-theme', data)
    localStorage.setItem('theme', data)
    state.theme = data
  }

  return {
    ...toRefs(state),
    insertPost,
    changeFullScreen,
    loginOut,
    changeDrawer,
    changeTheme,
  }
})
